<template>
  <div>
    <van-tabbar
      v-model="active"
      active-color="#d7ab69"
      inactive-color="#0f0b0b"
      route
    >
      <van-tabbar-item
        v-for="item in icon"
        :key="item.id"
        :name="item.name"
        :to="item.route"
        :badge="(item.id == 4) & (num != 0) ? num : null"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" alt="" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      icon: [
        {
          id: 1,
          title: "首页",
          route: "/home",
          active: require("../assets/images/foot/1.png"),
          inactive: require("../assets/images/foot/2.png"),
        },
        {
          id: 2,
          title: "生日蛋糕",
          route: "/product",
          active: require("../assets/images/foot/1.png"),
          inactive: require("../assets/images/foot/3.png"),
        },
        // {
        //   id: 3,
        //   title: "全国配",
        //   route: "/product",
        //   active: require("../assets/images/foot/1.png"),
        //   inactive: require("../assets/images/foot/4.png"),
        // },
        {
          id: 4,
          title: "购物袋",
          route: "/card",
          active: require("../assets/images/foot/1.png"),
          inactive: require("../assets/images/foot/5.png"),
        },
        {
          id: 5,
          title: "我的",
          // 登录
          route: "/usercenter",
          active: require("../assets/images/foot/1.png"),
          inactive: require("../assets/images/foot/6.png"),
        },
      ],
      num: 0,
    }
  },
  beforeMount() {
    let count = localStorage.getItem("count")
    this.$eventBus.$on('count',count=>{
      count!=null&&(this.num=count)
    })
    count != null && (this.num = count)
  },
}
</script>

<style lang="scss" scoped>
* {
  z-index: 1000;
}
.van-tabbar-item__icon img {
  width: 1.875rem;
  height: 1.875rem;
}
</style>
